<template>
  <view :style="colorStyle" v-if="info.id">
    <view class="infobox1" v-if="info.orderStatus == 0">
      <view class="block1 c1F1F1F f40 fontWeight"> 待支付 </view>
      <view class="block2 c1F1F1F f28">
        <u-count-down
          :time="downTime"
          format="HH:mm:ss"
          autoStart
          millisecond
          @change="downonChange"
          @finish="downfinish"
          ><view class="flex"
            >请在
            <view class="flex aitems cF65B49">
              <view class="tip1">
                <text class="">{{
                  timeData.hours > 10 ? timeData.hours : "0" + timeData.hours
                }}</text>
              </view>
              <text class="tip2">:</text>
              <view class="tip1">
                <text class="">{{
                  timeData.minutes > 10
                    ? timeData.minutes
                    : "0" + timeData.minutes
                }}</text>
              </view>
              <text class="tip2">:</text>
              <view class="tip1">
                <text class="">{{
                  timeData.seconds > 10
                    ? timeData.seconds
                    : "0" + timeData.seconds
                }}</text>
              </view> </view
            >分钟内完成支付，否则订单将自动关闭！</view
          >
        </u-count-down>
      </view>
    </view>
    <view
      class="infobox1"
      v-if="
        info.orderStatus == 1 && info.logisticsType == logisticsType.logistics
      "
    >
      <view
        class="block1 c1F1F1F f40 fontWeight"
        v-if="info.orderLogisticsList.length == 0"
      >
        待发货
      </view>
      <view class="block1 c1F1F1F f40 fontWeight" v-else> 部分发货 </view>
      <view class="block2 c1F1F1F f28"> 支付成功，请耐心等待商家发货 </view>
    </view>
    <view
      class="infobox1"
      v-if="
        info.orderStatus == 2 && info.logisticsType == logisticsType.logistics
      "
    >
      <view class="block1 c1F1F1F f40 fontWeight"> 待收货 </view>
      <view class="block2 c1F1F1F f28"> 商家已发货！请等待签收商品 </view>
    </view>
    <view
      class="infobox1"
      v-if="
        info.orderStatus == 1 && info.logisticsType == logisticsType.selfRaising
      "
    >
      <view class="block1 c1F1F1F f40 fontWeight"> 待备货 </view>
      <view class="block2 c1F1F1F f28"> 支付成功，请耐心等待商家备货 </view>
    </view>
    <view
      class="infobox1"
      v-if="
        info.orderStatus == 2 && info.logisticsType == logisticsType.selfRaising
      "
    >
      <view class="block1 c1F1F1F f40 fontWeight"> 待核销 </view>
      <!-- <view class="block2 c1F1F1F f28"> 商家已备货！请上门自提商品 </view> -->
    </view>
    <view class="infobox1" v-if="info.orderStatus == 3">
      <view class="block1 c1F1F1F f40 fontWeight"> 已核销 </view>
    </view>
    <view class="infobox1" v-if="info.orderStatus == -1">
      <view class="block1 c1F1F1F f40 fontWeight"> 已取消 </view>
    </view>
    <view
      class="infobox8 flex aitems between"
      v-if="info.logisticsType == logisticsType.logistics"
    >
      <view class="block1">
        <view class="info1 c1F1F1F f32 fontWeight">
          {{ info.logistics.province }} {{ info.logistics.city }}
          {{ info.logistics.district }}
          {{ info.logistics.address }}
        </view>
        <view class="info2 c858585 f28 flex aitems">
          <view class="tip1">
            {{ info.logistics.consignee }}
          </view>
          <view class="tip2">
            {{ info.logistics.mobile }}
          </view>
        </view>
      </view>
    </view>
    <view
      class="infobox8 flex aitems between"
      v-if="
        info.orderLogisticsList.length !== 0 &&
        info.logisticsType == logisticsType.logistics
      "
    >
      <view class="block1 flex aitems">
        <image src="@/static/img44.png" mode=""></image>
        <view class="c1F1F1F f32 fontWeight"> 查看物流信息 </view>
      </view>
      <image src="@/static/img18.png" mode=""></image>
    </view>
    <view
      class="infobox2"
      v-if="info.logisticsType == logisticsType.selfRaising"
    >
      <view class="block1 c1F1F1F f32 fontWeight">
        自提点:{{ info.logisticsSeller.name }}
      </view>
      <view class="block2 flex">
        <image :src="info.seller.logo" mode="aspectFill"></image>
        <view class="block2info">
          <view class="info1 flex between" @click="openLocation">
            <view class="tip1 c1F1F1F f28 ellipsis2">
              {{ info.logisticsSeller.province }}{{ info.logisticsSeller.city
              }}{{ info.logisticsSeller.district
              }}{{ info.logisticsSeller.address }}
            </view>
            <u-icon name="map-fill" color="var(--view-theme)"></u-icon>
          </view>
          <view
            class="info2 flex aitems"
            @click.stop="makePhoneCall(String(info.logisticsSeller.mobile))"
          >
            <u-icon
              name="phone-fill"
              size="24"
              color="var(--view-theme)"
            ></u-icon>
            <view class="tip1 themeColor f24">
              {{ info.logisticsSeller.mobile }}
            </view>
          </view>
        </view>
      </view>
      <view class="block3">
        <view class="info1 c1F1F1F f32 fontWeight"> 提货人信息 </view>
        <view class="info2 flex aitems between">
          <view class="tip1 c858585 f28"> 提货人 </view>
          <view class="tip2 c1F1F1F f28 fontWeight">
            {{ info.logistics.consignee }}
          </view>
        </view>
        <view class="info2 flex aitems between">
          <view class="tip1 c858585 f28"> 手机号 </view>
          <view class="tip2 c1F1F1F f28 fontWeight">
            {{ info.logistics.mobile }}
          </view>
        </view>
      </view>
    </view>

    <view class="infobox3">
      <view class="block1 flex aitems">
        <image class="icon1" :src="info.seller.logo" mode="aspectFill"></image>
        <view class="name c1F1F1F f32 fontWeight">
          {{ info.seller.name }}
        </view>
      </view>
      <view class="block2">
        <view
          class="list flex"
          v-for="(item, index, key) in info.orderDetailList"
          :key="key"
        >
          <view
            class="info2 flex aitems"
            v-if="
              isoperation &&
              item.refundStatus == 0 &&
              item.refundNum < item.goods.goodsNum
            "
          >
            <radio
              :checked="item.check"
              color="var(--view-theme)"
              style="transform: scale(0.9)"
            />
          </view>
          <view
            class="info2 flex aitems"
            v-if="
              isoperation &&
              ((!item.check && item.refundStatus == 1) ||
                item.refundNum == item.goods.goodsNum)
            "
          >
            <radio
              :checked="item.check"
              color="var(--view-theme)"
              style="transform: scale(0.9)"
              :disabled="true"
            />
          </view>
          <image :src="item.goods.img" mode="aspectFill"></image>
          <view class="info1">
            <view class="tipbox1 flex aitems between">
              <view class="tip1 ellipsis1 c1F1F1F f28">
                {{ item.goods.name }}
              </view>
              <view class="tip2 c858585 f24"> X{{ item.goods.goodsNum }} </view>
            </view>
            <view class="tipbox2 c858585 f24">
              {{
                item.goods.goodsSpec
                  .replace(/{/g, "")
                  .replace(/}/, "")
                  .replace(/"/g, "")
              }}
            </view>
            <view class="tipbox3 flex aitems between">
              <view class="tip1 c1F1F1F fontWeight">
                <text class="f24">￥</text>
                <text class="f32">{{ item.goodsPrice }}</text>
              </view>
            </view>
          </view>
        </view>
        <view class="btns tcenter cfff f30" v-if="isoperation">确认申请</view>
      </view>
    </view>

    <view class="infobox4">
      <view class="title c1F1F1F f32 fontWeight"> 订单明细 </view>
      <view class="cell flex aitems between">
        <view class="block1 c858585 f32"> 商品总价 </view>
        <view class="block2 cF65B49 f28 flex aitems fontWeight">
          ￥{{ info.goodsPrice }}
        </view>
      </view>
      <view class="cell flex aitems between">
        <view class="block1 c858585 f32"> 运费 </view>
        <view class="block2 c1F1F1F f28 flex aitems fontWeight">
          ￥{{ info.logisticsFee }}
        </view>
      </view>
      <view class="cell flex aitems between">
        <view class="block1 c858585 f32"> 数量 </view>
        <view class="block2 c1F1F1F f28 flex aitems fontWeight">
          {{ info.goodsNum }}
        </view>
      </view>
      <view class="cell flex aitems between">
        <view class="block1 c858585 f32"> 积分抵扣 </view>
        <view class="block2 c1F1F1F f28 flex aitems fontWeight">
          {{ info.deductIntegral }}积分
        </view>
      </view>
      <!-- <view class="cell flex aitems between">
                  <view class="block1 c858585 f32">
                      余额抵扣
                  </view>
                  <view class="block2 c1F1F1F f28 flex aitems fontWeight">
                      ￥{{info.deductMoney}}
                  </view>
              </view> -->
      <view class="cell flex aitems between">
        <view class="block1 c858585 f32"> 微信支付 </view>
        <view class="block2 cF65B49 f28 flex aitems fontWeight">
          ￥{{ info.orderPrice }}
        </view>
      </view>
      <view class="cell flex aitems between">
        <view class="block1 c858585 f32"> 店铺优惠 </view>
        <view class="block2 cF65B49 f28 flex aitems fontWeight">
          ￥{{
            Number(info.deductCouponSeller + info.deductPublicity).toFixed(2)
          }}
        </view>
      </view>
      <view class="cell2">
        <view class="cell flex aitems between">
          <view class="block1 c858585 f32"> 优惠券 </view>
          <view class="block2 cF65B49 f28 flex aitems fontWeight">
            ￥{{ info.deductCouponSeller }}
          </view>
        </view>
        <view
          class="cell flex aitems between"
          v-for="(item, index, key) in info.deductPublicityDetail"
          :key="key"
        >
          <view class="block1 c858585 f32">
            {{ item.key }}
          </view>
          <view class="block2 cF65B49 f28 flex aitems fontWeight">
            ￥{{ item.value }}
          </view>
        </view>
      </view>
      <view class="cell flex aitems between">
        <view class="block1 c858585 f32"> 平台优惠 </view>
        <view class="block2 cF65B49 f28 flex aitems fontWeight">
          ￥{{ info.deductCouponSystem }}
        </view>
      </view>
      <view class="totalbox flex aitems between">
        <view class=""> </view>
        <view class="flex aitems fontWeight">
          <view class="info1 c1F1F1F f24">
            共{{ info.goodsNum }}件，合计：
          </view>
          <view class="info2 cF65B49 f36"> ￥{{ info.orderPrice }} </view>
        </view>
      </view>
    </view>

    <view class="infobox5">
      <view class="title c1F1F1F f32 fontWeight"> 备注 </view>
      <view class="block1 c858585 f28">
        {{ info.buyerRemark ? info.buyerRemark : "无" }}
      </view>
    </view>

    <view class="infobox4">
      <view class="title c1F1F1F f32 fontWeight"> 订单明细 </view>
      <view class="cell flex aitems between">
        <view class="block1 c858585 f32"> 订单编号 </view>
        <view class="block2 c1F1F1F f28 flex aitems fontWeight">
          {{ info.orderNo }}
          <image
            src="@/static/img42.png"
            mode=""
            @click="copy(info.orderNo)"
          ></image>
        </view>
      </view>
      <view class="cell flex aitems between">
        <view class="block1 c858585 f32"> 配送方式 </view>
        <view class="block2 c1F1F1F f28 flex aitems fontWeight">
          {{ logisticsType[info.logisticsType] }}
        </view>
      </view>
      <view class="cell flex aitems between">
        <view class="block1 c858585 f32"> 下单时间 </view>
        <view class="block2 c1F1F1F f28 flex aitems fontWeight">
          {{ info.createTime }}
        </view>
      </view>
      <view class="cell flex aitems between" v-if="info.payTime">
        <view class="block1 c858585 f32"> 支付时间 </view>
        <view class="block2 c1F1F1F f28 flex aitems fontWeight">
          {{ info.payTime }}
        </view>
      </view>
      <view class="cell flex aitems between" v-if="info.sendTime">
        <view class="block1 c858585 f32"> 备货时间 </view>
        <view class="block2 c1F1F1F f28 flex aitems fontWeight">
          {{ info.sendTime }}
        </view>
      </view>
      <view class="cell flex aitems between" v-if="info.finishTime">
        <view class="block1 c858585 f32"> 收货时间 </view>
        <view class="block2 c1F1F1F f28 flex aitems fontWeight">
          {{ info.finishTime }}
        </view>
      </view>
    </view>

    <!-- <view class="" style="height: 200rpx"> </view> -->

    <view class="infobox6 flex aitems between">
      <view class="block1"> </view>
      <view class="block2 flex aitems">
        <view
          class="info2 f28 cfff"
          @click="handleOrderVerify"
          v-if="
            info.orderStatus == 2 &&
            info.logisticsType == logisticsType.selfRaising
          "
        >
          核销订单
        </view>
      </view>
    </view>

    <canvas
      class="canvas-code"
      canvas-id="myQrcode"
      style="
        background: #fff;
        width: 200px;
        height: 200px;
        display: block;
        left: -800rpx;
        position: absolute;
      "
    />
  </view>
</template>

<script>
import {
  orderInfo,
  orderCancel,
  orderReceipt,
  config as configAPI,
  dictbizlist,
  payOrder,
  orderVerify,
} from "@/servers/servers.js";
import { pays } from "@/utils/pay";
import { HTTP_STATUS, config } from "@/servers/config.js";
import { getStorage, getToken, setStorage } from "../../utils/storage";
import colors from "@/mixins/color";
import { loading, msg, go, showModal, requestPayment } from "../../utils/wxAPI";
import QRCode from "@/utils/weapp-qrcode.js";
import {
  logisticsType,
  refundStatusEn,
  orderStatus,
  payClient,
} from "@/keys/keys";
import { getEnv } from "@/utils/env.js";
export default {
  mixins: [colors],
  data() {
    return {
      payClient,
      logisticsType,
      refundStatusEn,
      orderStatus,
      options: {},
      info: {},
      isoperation: false,
      configInfo: {},
      dictbizlist: [],
      timeData: {},
      downTime: 99999999,
    };
  },
  async onLoad(options) {
    this.options = options;
    // if (getToken()) {
    // 	this.orderInfo()
    // }
  },
  async onShow() {
    if (getToken()) {
      this.isoperation = false;
      await this.config();
      await this.handleDictbizlist();
      this.orderInfo();
    }
  },
  methods: {
    async handleDictbizlist() {
      let { data } = await dictbizlist({
        code: "express",
      });
      if (data.code == HTTP_STATUS.RUSELT_SUCCESS) {
        this.dictbizlist = data.data;
      }
    },
    async config() {
      let { data } = await configAPI({
        key: "shop",
      });
      if (data.code == HTTP_STATUS.RUSELT_SUCCESS) {
        let info = JSON.parse(data.data);
        this.configInfo = info;
      }
    },
    async orderInfo() {
      loading();
      let { data } = await orderInfo({
        id: this.options.id,
      });
      if (data.code == HTTP_STATUS.RUSELT_SUCCESS) {
        let info = data.data;
        info.seller.sellerPickConfigList.map((item) => {
          if (item.addressId == info.logisticsSeller.id) {
            info.logisticsSeller.pickOpenTime = item.pickOpenTime;
            info.logisticsSeller.pickOpenDate = item.pickOpenDate;
          }
        });
        info.deductPublicityDetail = info.deductPublicityDetail
          ? JSON.parse(info.deductPublicityDetail)
          : {};
        info.orderDetailList.map((item) => {
          item.check = false;
        });
        this.dictbizlist.map((item) => {
          if (item.dictKey == info.logisticsName) {
            info.logisticsName = item.dictValue;
          }
        });

        let createTime = new Date(info.createTime.replace(/-/g, "/")).getTime();
        let now = Date.now();
        let configbase = this.configInfo.close;
        this.downTime = createTime + configbase * 60 * 1000 - now;
        console.log(this.downTime);

        this.info = info;

        if (
          (info.orderStatus == 2 || info.orderStatus == 3) &&
          info.logisticsType == this.logisticsType.selfRaising
        ) {
        } else {
          showModal({
            t2: "该订单不是待核销订单",
            btn1show: false,
          }).then(() => {
            uni.switchTab({
              url: "/pages/index/index",
            });
          });
        }

        console.log(this.info);
      }
      uni.stopPullDownRefresh();
      uni.hideLoading();
    },

    async orderCancel() {
      showModal({
        t2: "是否取消该订单？",
      })
        .then(async () => {
          loading();
          let { data } = await orderCancel({
            id: this.info.id,
          });
          if (data.code == HTTP_STATUS.RUSELT_SUCCESS) {
            msg(data.msg);
            setStorage("orderRef", 1);
            this.orderInfo();
          }
          uni.hideLoading();
        })
        .catch((err) => {
          console.log(err);
        });
    },

    async orderReceipt() {
      showModal({
        t2: "是否确认收货？",
      })
        .then(async () => {
          loading();
          let { data } = await orderReceipt({
            id: this.info.id,
          });
          if (data.code == HTTP_STATUS.RUSELT_SUCCESS) {
            msg(data.msg);
            setStorage("orderRef", 1);
            this.orderInfo();
          }
          uni.hideLoading();
        })
        .catch((err) => {
          console.log(err);
        });
    },

    async handleOrderVerify() {
      showModal({
        t2: "是否将该订单核销？",
      })
        .then(async () => {
          loading();
          let { data } = await orderVerify({
            id: this.info.id,
          });
          if (data.code == HTTP_STATUS.RUSELT_SUCCESS) {
            showModal({
              t2: "核销成功",
              btn1show: false,
            }).then(() => {
              this.orderInfo();
            });
          }
          uni.hideLoading();
        })
        .catch((err) => {
          console.log(err);
        });
    },

    copy(data) {
      uni.setClipboardData({
        data,
        success() {
          msg("复制成功");
        },
      });
    },
    gourl(url) {
      go(url);
    },
    /**
     * 点击批量售后
     * 需要清空所有的勾选值，
     * 以防会有初始值
     */
    handleIsoperation() {
      this.isoperation = !this.isoperation;
    },

    /**
     * 申请单个商品退款
     */
    applyRefund(item) {
      setStorage("orderinfo", this.info);
      setStorage("refundinfo", [item]);
      go("/pages/refund/applay");
    },

    /**
     * 选择售后商品
     */
    selectGoods(index) {
      this.info.orderDetailList[index].check =
        !this.info.orderDetailList[index].check;
    },

    /**
     * 批量申请售后
     */
    allapplyRefund() {
      let goods = [];
      this.info.orderDetailList.map((item) => {
        if (item.check) {
          goods.push(item);
        }
      });
      if (goods.length == 0) {
        return msg("请选择售后商品");
      } else {
        setStorage("orderinfo", this.info);
        setStorage("refundinfo", goods);
        go("/pages/refund/applay");
      }
    },

    /**
     * 不可以选择退款
     */
    tipMsg() {
      return msg("该商品状态不可申请售后");
    },

    downonChange(e) {
      let hours = e.hours + e.days * 24;
      e.hours = hours;
      this.timeData = e;
    },

    downfinish() {
      this.orderInfo();
    },

    makePhoneCall(phoneNumber) {
      uni.makePhoneCall({
        phoneNumber, //仅为示例
      });
    },

    openLocation(item) {
      // #ifdef MP-WEIXIN
      uni.openLocation({
        latitude: Number(this.info.logisticsSeller.lat),
        longitude: Number(this.info.logisticsSeller.lng),
        name: this.info.logisticsSeller.name,
        address:
          this.info.logisticsSeller.province +
          this.info.logisticsSeller.city +
          this.info.logisticsSeller.district +
          this.info.logisticsSeller.address,
      });
      // #endif
      // #ifdef H5
      if (getEnv() == "WX_PUBLIC") {
        /**调用公众号SDK**/
        this.$jwx.openLocation({
          latitude: Number(this.info.logisticsSeller.lat),
          longitude: Number(this.info.logisticsSeller.lng),
          name: this.info.logisticsSeller.name,
          address:
            this.info.logisticsSeller.province +
            this.info.logisticsSeller.city +
            this.info.logisticsSeller.district +
            this.info.logisticsSeller.address,
          callback: function (res) {},
        });
      }
      if (getEnv() == "H5") {
        /**调用自带地图**/
        uni.openLocation({
          latitude: Number(this.info.logisticsSeller.lat),
          longitude: Number(this.info.logisticsSeller.lng),
          name: this.info.logisticsSeller.name,
          address:
            this.info.logisticsSeller.province +
            this.info.logisticsSeller.city +
            this.info.logisticsSeller.district +
            this.info.logisticsSeller.address,
          fail(err) {},
        });
      }
      // #endif
    },

    async handlePayOrder() {
      loading();
      let payClient = "";
      let payType = "WX";
      let appId = "";
      let codes = "";
      // #ifdef H5
      appId = config.appId;
      console.log(this.payClient);
      if (getEnv() == "H5") {
        payClient = this.payClient.H5;
      }
      if (getEnv() == "WX_PUBLIC") {
        payClient = this.payClient.WECHAT;
      }
      // #endif
      // #ifdef MP-WEIXIN
      appId = config.MPappId;
      payClient = this.payClient.MINIAPP;
      let { code } = await uni.login();
      codes = code;
      // #endif
      let { data } = await payOrder({
        appId,
        code: codes,
        orderNo: this.info.orderNo,
        param: "",
        payClient,
        payType,
        returnUrl: "",
      });
      if (data.code == HTTP_STATUS.RUSELT_SUCCESS) {
        let info = data.data;
        if (info == "true") {
          getStorage("orderRef", 1);
          this.orderInfo();
        } else {
          if (payClient == this.payClient.WECHAT) {
            pays(
              JSON.parse(info),
              (res) => {
                msg("支付成功", true);
                getStorage("orderRef", 1);
                this.orderInfo();
              },
              () => {}
            );
          }
          if (payClient == this.payClient.MINIAPP) {
            requestPayment(JSON.parse(info))
              .then((res) => {
                msg("支付成功", true);
                getStorage("orderRef", 1);
                this.orderInfo();
              })
              .catch((err) => {
                uni.hideLoading();
              });
          }
        }
      }
    },

    /**
     * 生成本地二维码
     */
    //绘制二维码
    drawImg: function (code) {
      let that = this;
      new QRCode("myQrcode", {
        text: `${config.domain}/pages/order/verify?id=${code}`,
        width: 141, //canvas 画布的宽
        height: 141, //canvas 画布的高
        padding: 0, // 生成二维码四周自动留边宽度，不传入默认为0
        correctLevel: QRCode.CorrectLevel.L, // 二维码可辨识度
        callback: (res) => {
          //工具回调数据
          // 接下来就可以直接调用微信小程序的api保存到本地或者将这张二维码直接画在海报上面去，看各自需求
          uni.hideLoading();
          console.log("生成二维码", res);
          //将图片路劲放入data中，显示在wxml的image标签上
          // that.info.ewmImg = res.path;
          that.$set(this.info, "ewmImg", res.path);
        },
      });
    },
  },
  onPullDownRefresh() {
    this.orderInfo();
  },
};
</script>
<style>
/* #ifdef MP-WEIXIN */
page {
  background: #f5f5f5;
}

/* #endif */
</style>
<style lang="scss" scoped>
page {
  background: #f5f5f5;
}

.infobox1 {
  margin: 40rpx 30rpx 0;

  .block2 {
    margin: 16rpx 0 0;
  }
}

.infobox2 {
  padding: 32rpx 24rpx;
  background: #fff;
  border-radius: 28rpx;
  margin: 40rpx 30rpx 0;

  .block2 {
    margin: 30rpx 0 0;

    image {
      width: 140rpx;
      height: 140rpx;
      border-radius: 28rpx;
    }

    .block2info {
      width: calc(100% - 140rpx - 20rpx);
      margin-left: 20rpx;

      .info1 {
        .tip1 {
          width: 500rpx;
        }
      }

      .info2 {
        margin: 30rpx 0 0;

        .tip1 {
          margin-left: 10rpx;
        }
      }
    }
  }

  .block3 {
    border-radius: 28rpx;
    border: 1px solid #f5f5f5;
    background: #f5f5f5;
    margin: 32rpx 0 0;
    padding: 28rpx 24rpx;

    .info1 {
      margin: 0 0 14rpx 0;
    }

    .info2 {
      padding: 14rpx 0;
    }
  }
}

.infobox7 {
  padding: 32rpx 24rpx;
  background: #fff;
  border-radius: 28rpx;
  margin: 40rpx 30rpx 0;

  .info1 {
  }

  .info2 {
  }

  image {
    width: 240rpx;
    height: 240rpx;
    margin: 32rpx auto;
  }
}

.infobox3 {
  padding: 32rpx 24rpx 1rpx;
  background: #fff;
  border-radius: 28rpx;
  margin: 40rpx 30rpx 0;

  .block1 {
    margin: 0 0 34rpx 0;

    .icon1 {
      width: 40rpx;
      height: 40rpx;
    }

    .name {
      margin: 0 12rpx 0 8rpx;
    }

    .icon2 {
      width: 32rpx;
      height: 32rpx;
    }
  }

  .block2 {
    .btns {
      background: var(--view-theme);
      border-radius: 63rpx;
      padding: 20rpx 54rpx;
      margin: 0 0 30rpx 0;
    }

    .list {
      margin: 0 0 32rpx 0;

      image {
        width: 152rpx;
        height: 152rpx;
        min-width: 152rpx;
        border-radius: 28rpx;
      }

      .info1 {
        width: calc(100% - 152rpx - 20rpx);
        margin-left: 20rpx;

        .tipbox1 {
          .tip1 {
            width: 400rpx;
          }

          .tip2 {
          }
        }

        .tipbox2 {
          margin: 16rpx 0 0;
        }

        .tipbox3 {
          margin: 21rpx 0 0;

          .tip1 {
          }

          .tip2 {
            border-radius: 40rpx;
            border: 1px solid #ccc;
            padding: 21rpx 34rpx;
          }
        }
      }
    }
  }
}

.infobox4 {
  padding: 32rpx 24rpx;
  background: #fff;
  border-radius: 28rpx;
  margin: 30rpx 30rpx 0;

  .title {
    margin: 0 0 16rpx 0;
  }

  .cell2 {
    border-radius: 28rpx;
    background: #f5f5f5;
    padding: 14rpx 24rpx;
    margin: 15rpx 0;
  }

  .cell {
    padding: 16rpx 0;

    .block1 {
      min-width: 200rpx;
    }

    .block2 {
      image {
        width: 32rpx;
        height: 32rpx;
        margin-left: 10rpx;
      }

      .img {
        image {
          width: 140rpx;
          height: 140rpx;
          border-radius: 28rpx;
          margin: 0 0 10rpx 10rpx;
        }
      }
    }
  }

  .totalbox {
    margin: 20rpx 0 0;
    border-top: 1px solid #f5f5f5;
    padding: 40rpx 0 0;
  }
}

.infobox5 {
  padding: 32rpx 24rpx;
  background: #fff;
  border-radius: 28rpx;
  margin: 30rpx 30rpx 0;

  .block1 {
    border-radius: 28rpx;
    background: #f5f5f5;
    padding: 28rpx 24rpx;
    margin: 24rpx 0 0;
    min-height: 144rpx;
  }
}

.infobox6 {
  position: fixed;
  width: 100%;
  bottom: 0;
  background: #fff;
  z-index: 99;
  padding-top: 18rpx;
  // padding-bottom: constant(safe-area-inset-bottom);
  // padding-bottom: env(safe-area-inset-bottom);
  padding-bottom: 40rpx;
  /* #ifdef H5 */
  /* #endif */

  .block2 {
    padding: 0 30rpx;
    .info1 {
      color: var(--view-theme);
      background: var(--view-op-ten);
      border-radius: 63rpx;
      padding: 20rpx 54rpx;
      margin: 0 0 0 12rpx;
    }

    .info2 {
      background: var(--view-theme);
      border-radius: 63rpx;
      padding: 20rpx 54rpx;
      margin: 0 0 0 12rpx;
    }
  }
}

.infobox8 {
  padding: 32rpx 24rpx;
  background: #fff;
  border-radius: 28rpx;
  margin: 30rpx 30rpx 0;

  .block1 {
    .info1 {
    }

    .info2 {
      margin: 24rpx 0 0;

      .tip1 {
      }

      .tip2 {
        margin-left: 16rpx;
      }
    }

    image {
      width: 48rpx;
      height: 48rpx;
      margin: 0 24rpx 0 0;
    }
  }

  image {
    width: 32rpx;
    height: 32rpx;
  }
}
</style>
